<template>
  <div class="custom-main full-page">
    <el-card shadow="hover" class="data-card">
      <div class="table-title">抽检要素表</div>
      <el-table
          :data="tableData"
          border
          height="calc(100vh - 180px)"
          :span-method="mergeCells"
          header-cell-class-name="table-header"
          class="factor-table"
      >
        <el-table-column prop="parentName" label="一级指标" align="center" width="220" />
        <el-table-column prop="factorName" label="二级指标" align="center" width="260" />
        <el-table-column prop="factorDetail" align="left">
          <template #header>
            <div style="text-align: center; width: 100%;">评议要素</div>
          </template>
        </el-table-column>

      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// ======= 抽检要素表（由原始编号数据构造） =======
const tableData = ref([
  // 一级指标：选题意义
  { parentName: '选题意义', factorName: '价值导向', factorDetail: '体现立德树人要求，符合党和国家方针政策和法律法规，符合社会主义核心价值观，顺应国内外科技发展趋势和创新精神。' },
  { parentName: '选题意义', factorName: '选题目的与意义', factorDetail: '符合专业培养目标，体现综合训练基本要求；面向所在专业领域学术问题或行业社会实际问题，有一定的理论或实用价值。' },

  // 一级指标：写作安排
  { parentName: '写作安排', factorName: '写作形式', factorDetail: '写作形式符合专业特点和选题需要。' },
  { parentName: '写作安排', factorName: '工作量', factorDetail: '工作量饱满，能反映出学生的综合能力培养过程。' },

  // 一级指标：逻辑构建
  { parentName: '逻辑构建', factorName: '内容组织', factorDetail: '核心模块完备，层次分明，重点突出，详略得当。' },
  { parentName: '逻辑构建', factorName: '逻辑结构', factorDetail: '研究（设计）路径合理，论点鲜明，论据确凿，论证充分，达到所在专业领域要求。' },

  // 一级指标：专业能力
  { parentName: '专业能力', factorName: '文献调研能力', factorDetail: '综合分析国内外文献，追踪本领域研究现状或行业动态，关注学科及本领域前沿，能支撑该论文(设计)的选题。' },
  { parentName: '专业能力', factorName: '综合应用知识能力', factorDetail: '将相关领域的基础理论、专业知识合理应用到研究（设计）工作中，能体现所在专业领域的能力和素养。' },
  { parentName: '专业能力', factorName: '分析解决问题能力', factorDetail: '运用专业知识，采取恰当的研究（设计）方法、路径开展研究（设计），善于发现问题、分析问题，具备解决实际问题的能力和素养。' },
  { parentName: '专业能力', factorName: '创新能力', factorDetail: '观点新颖，体现出较强的创新意识，或对实践具有一定指导意义。' },

  // 一级指标：学术规范
  { parentName: '学术规范', factorName: '行文规范', factorDetail: '文字表达、书写格式、图表(图纸)、公式符号、缩略词等方面符合通行学术规范。' },
  { parentName: '学术规范', factorName: '引用规范', factorDetail: '在资料引证、参考文献等方面符合通行学术规范和知识产权相关规定。' },
])

// ======= 合并单元格逻辑 =======
const mergeCells = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    const parentName = row.parentName
    const sameParentRows = tableData.value.filter(
        item => item.parentName === parentName
    )
    const firstIndex = tableData.value.findIndex(
        item => item.parentName === parentName
    )
    if (rowIndex === firstIndex) {
      return { rowspan: sameParentRows.length, colspan: 1 }
    } else {
      return { rowspan: 0, colspan: 0 }
    }
  }
}
</script>

<style scoped>
.full-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: #f5f7fa;
  padding: 30px;
}

.data-card {
  width: 100%;
  max-width: 1400px;
  border-radius: 20px;
  padding: 25px;
  background: #fff;
  box-shadow: 0 6px 25px rgba(79, 198, 242, 0.15);
}

.table-title {
  font-size: 26px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #4fc6f2, #3a7bd5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.table-header {
  background-color: #4fc6f2 !important;
  color: white !important;
  font-weight: bold;
  font-size: 17px;
}

.factor-table {
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.el-table .cell {
  font-size: 15px;
  line-height: 1.6;
}

.el-table td {
  padding: 12px 16px;
}
</style>
